<template>
	<com-page bg-color="rgba(0,0,0,.5)">
		<com-status-bar color="rgba(0,0,0,.5)"></com-status-bar>
		<view class="position-relative y-flex-1">
			<scroll-view scroll-y="true" class="position-absolute-cover">
				<com-gap height="50"></com-gap>
				<com-image :style="{
					'height': poster ? 'auto' : imageMinHeight + 'px'
				}" class="poster-image" :src="poster" mode="widthFix">
					<template #loading>
						<com-text :color="skinColor.color_3" size="30" :value="'生成' + shareType + '中'"></com-text>
					</template>
					<template #error>
						<com-text :color="skinColor.color_3" size="30" :value="'生成' + shareType + '失败'"></com-text>
					</template>
				</com-image>
				<com-gap height="50"></com-gap>
			</scroll-view>
		</view>
		<view v-if="show" elevation="3" class="poster-btns y-flex" :style="{
			'background-color': skinColor.color_bg_2,
		}">
			<text class="poster-btn" @tap="share" :style="{color: skinColor.color_1}">分享到</text>
			<com-gap height="1px" :color="skinColor.color_gap_1"></com-gap>
			<text class="poster-btn" @tap="save" :style="{color: skinColor.color_1}">保存到手机</text>
			<com-gap height="10" :color="skinColor.color_gap_1"></com-gap>
			<text class="poster-btn" @tap="hide" :style="{color: skinColor.color_1}">取消</text>
		</view>
		<com-poster ref="poster" />
		<com-notify ref="notify" />
		<com-qrcode ref="qrcode"
		style="position: absolute;top:0;left:0;"
		:visible="false"
		:auto="false"
		:text="params.shareUrl"
		:color-dark="colorDark"
		:color-light="colorLight"
		v-if="params" />
	</com-page>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	import { appName, appLogo } from '@/assets/js/config.js'
	export default {
		mixins: [appMixin],
		computed: {
			imageMinHeight() {
				return this.windowHeight - uni.upx2px(100) - uni.getSystemInfoSync().safeArea.top
			},
			shareType () {
				return this.params.shareType == 'user' ? '名片' : '海报'
			},
			params () {
				return this.$Route.query.params
			},
			colorDark () {
				return this.skinMode == 'default' ? '#000' : '#fff'
			},
			colorLight () {
				return this.skinMode == 'default' ? '#fff' : '#000'
			},
			textColor () {
				return this.skinMode == 'default' ? '#000' : '#fff'
			},
			subTextColor () {
				return '#999'
			},
			bgColor () {
				return this.skinMode == 'default' ? '#fff' : '#000'
			},
			shadowColor () {
				return this.skinMode == 'default' ? 'rgba(255,255,255,.5)' : 'rgba(0,0,0,.5)'
			}
		},
		data() {
			return {
				poster: '',
				show: false,
				qrcodeUrl: ''//二维码图片链接
			}
		},
		onReady() {
			this.$nextTick(function() {
				this.start()
			})
		},
		methods: {
			makCode () {//生成二维码
				return new Promise((resolve, reject) => {
					this.$refs.qrcode.make({
						complete: res => {
							if ( res.errCode == 0 ) {
								this.$refs.qrcode.toTempFilePath({
									complete: res => {
										if ( res.errCode == 0 ) resolve(res.data.base64)
										else reject(res)
									}
								})
							} else {
								reject(res)
							}
						}
					})
				})
			},
			async start() {
				if ( this.params.shareUrl ) {
					try{
						this.qrcodeUrl = await this.makCode()
						const image = this.params.shareType == 'user' ? this.params.avatar : this.params.cover
						if (image) {
							this.$native.downloadNetResourceSaveLocal({
								src: image,
								referer: this.params.referer || '',
								complete: res => {
									uni.getImageInfo({
										src: res.tempFilePath,
										success: (rect) => {
											this.perposePoster(rect, res.tempFilePath)
										},
										fail: (err) => {
											this.$refs.notify.fail('uni.getImageInfo:fail')
										}
									})
								}
							})
						} else {
							this.perposePoster()
						}
					}catch(e){
						this.$refs.notify.fail(e.errMsg)
					}
				} else this.$refs.notify.fail('未发现分享链接')
			},
			perposePoster (rect, src) {
				if ( this.params.shareType == 'user' ) this.perposeUserPoster(rect, src)
				else this.perposeResourcePoster(rect, src)
			},
			//人物分享
			perposeUserPoster (rect, src) {
				const height = 1000
				const imageSize = 100
				const top = 150
				const form = [{
					src: src || appLogo,
					x: 100,
					y: top,
					width: imageSize,
					height: imageSize,
					radius: 20,
					type: 'image'
				}, {
					text: this.params.title,
					x: 120 + imageSize,
					y: top + 35,
					color: this.textColor,
					size: 40,
					lines: 1,
					width: 280,
					style: 'fill',
					type: 'text'
				}, {
					text: this.params.sourceName,
					x: 120 + imageSize,
					y: top + imageSize - 5,
					color: this.subTextColor,
					size: 22,
					width: 280,
					lineHeight: uni.upx2px(10),
					lines: 1,
					style: 'fill',
					type: 'text'
				}, {
					src: this.qrcodeUrl,
					x: 100,
					y: top + 50 + imageSize,
					width: 550,
					height: 550,
					type: 'image'
				}, {
					x: 320,
					y: top + 270 + imageSize,
					width: imageSize + 10,
					height: imageSize + 10,
					radius: 20,
					color: this.textColor,
					style: 'fill',
					shadowColor : this.shadowColor,
					shadowBlur: 10,
					shadowOffsetX: 5,
					shadowOffsetY: 5,
					type: 'rect'
				}, {
					src: src || appLogo,
					x: 325,
					y: top + 275 + imageSize,
					width: imageSize,
					height: imageSize,
					radius: 20,
					type: 'image'
				}, {
					text: '长按识别二维码',
					x: 295,
					y: top + 650 + imageSize,
					color: this.subTextColor,
					size: 20,
					style: 'fill',
					type: 'text'
				}]
				const options = {
					width: 750,
					height: height,
					background: this.bgColor,
					radius: 20
				}
				this.$refs.poster.start({
					options: options,
					data: form,
					success: (res) => {
						this.show = true
						this.poster = res.tempFilePath
					},
					fail: (err) => {
						this.$refs.notify.fail('生成名片失败')
					}
				})
			},
			//资源分享
			perposeResourcePoster(rect, src) {
				let imageHeight = rect ? (700 / rect.width) * rect.height : 0
				if (imageHeight / 750 > 2) {
					imageHeight = 2 * 750
				}
				const height = imageHeight + 300
				const form = [{
					text: this.params.title || '未知标题',
					x: 280,
					y: imageHeight + 80,
					color: this.textColor,
					size: 32,
					lines: 1,
					width: 430,
					style: 'fill',
					type: 'text'
				}, {
					text: this.params.description || '这是来自《' + this.params.sourceName + '》的' + (this.params.type || '资源'),
					x: 280,
					y: imageHeight + 120,
					color: this.subTextColor,
					size: 24,
					width: 400,
					lineHeight: uni.upx2px(10),
					lines: 4,
					style: 'fill',
					type: 'text'
				}, {
					text: 'By   ' + appName,
					x: 580,
					y: imageHeight + 280,
					color: this.subTextColor,
					size: 18,
					style: 'fill',
					type: 'text'
				}, {
					src: this.qrcodeUrl,
					x: 50,
					y: imageHeight + 50,
					width: 200,
					height: 200,
					type: 'image'
				}, {
					text: '长按识别二维码',
					x: 80,
					y: imageHeight + 280,
					color: this.subTextColor,
					size: 20,
					style: 'fill',
					type: 'text'
				}]
				const options = {
					width: 750,
					height: height,
					background: this.bgColor,
					radius: 20
				}
				if (src) {
					form.unshift({
						src: src,
						x: 25,
						y: 25,
						width: 700,
						height: imageHeight,
						type: 'image'
					})
				}
				this.$refs.poster.start({
					options: options,
					data: form,
					success: (res) => {
						this.show = true
						this.poster = res.tempFilePath
					},
					fail: (err) => {
						this.$refs.notify.fail('生成海报失败')
					}
				})
			},
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: () => {
						this.$refs.notify.success('成功保存图片到相册')
					},
					fail: err => {
						this.$refs.notify.fail(JSON.stringify(err))
					}
				})
			},
			share() {
				this.app.$native.shareFile(this.poster)
			},
			hide() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}

	.poster-btns {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.poster-btn {
		padding: 30rpx 0;
		font-size: 38rpx;
		text-align: center;
	}

	.poster-image {
		width: 700rpx;
		min-height: 1000rpx;
		margin: 0 25rpx;
	}
</style>